<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
const { ipcRenderer } = require('electron')

const router = useRouter()

// 导航菜单
const navItems = [
  { path: '/dashboard', name: '项目概况', icon: 'bi-speedometer2' },
  { path: '/projects', name: '项目管理', icon: 'bi-kanban' },
  { path: '/progress-update', name: '进度更新', icon: 'bi-arrow-up-circle' },
  { path: '/data-export', name: '数据导出', icon: 'bi-file-earmark-arrow-down' },
  { path: '/system-settings', name: '系统设置', icon: 'bi-gear' }
]

// 切换侧边栏
const sidebarCollapsed = ref(false)
const toggleSidebar = () => {
  sidebarCollapsed.value = !sidebarCollapsed.value
}

// 全局焦点监控
const setupGlobalFocusMonitor = () => {
  let lastFocusTime = Date.now()
  let focusCheckInterval

  const checkFocusState = () => {
    const now = Date.now()
    const activeElement = document.activeElement
    
    // console.log('[Global Focus Monitor]', {
    //   time: new Date().toISOString(),
    //   activeElement: activeElement?.tagName,
    //   activeElementType: activeElement?.type,
    //   timeSinceLastFocus: now - lastFocusTime,
    //   hasFocus: document.hasFocus()
    // })
  }

  const handleFocusChange = (e) => {
    lastFocusTime = Date.now()
    // console.log('[Global Focus Event]', {
    //   type: e.type,
    //   target: e.target.tagName,
    //   time: new Date().toISOString()
    // })
  }

  // 启动定期检查
  focusCheckInterval = setInterval(checkFocusState, 1000)

  // 添加全局焦点事件监听
  window.addEventListener('focus', handleFocusChange)
  window.addEventListener('blur', handleFocusChange)
  document.addEventListener('focusin', handleFocusChange, true)
  document.addEventListener('focusout', handleFocusChange, true)

  // 返回清理函数
  return () => {
    clearInterval(focusCheckInterval)
    window.removeEventListener('focus', handleFocusChange)
    window.removeEventListener('blur', handleFocusChange)
    document.removeEventListener('focusin', handleFocusChange, true)
    document.removeEventListener('focusout', handleFocusChange, true)
  }
}

// 监听数据库日志
ipcRenderer.on('database-log', (_, message) => {
  console.log(message)
})

onMounted(() => {
  // 从本地存储加载设置
  const savedSettings = localStorage.getItem('appSettings')
  if (savedSettings) {
    const settings = JSON.parse(savedSettings)
    if (settings.theme) {
      document.body.classList.add(`theme-${settings.theme}`)
    } else {
      document.body.classList.add('theme-military')
    }
    if (settings.fontSize) {
      document.documentElement.style.fontSize = `${settings.fontSize}px`
    }
  } else {
    document.body.classList.add('theme-military')
  }

  // 设置全局焦点监控
  const cleanup = setupGlobalFocusMonitor()
  onUnmounted(cleanup)
})
</script>

<template>
  <div class="app-container">
    <div class="content-container">
      <!-- 侧边导航栏 -->
      <div class="sidebar" :class="{ 'collapsed': sidebarCollapsed }">
        <div class="sidebar-content">
          <ul class="nav flex-column">
            <li class="nav-item" v-for="item in navItems" :key="item.path">
              <router-link :to="item.path" class="nav-link" exact-active-class="router-link-exact-active">
                <i :class="'bi ' + item.icon"></i>
                <span class="nav-text">{{ item.name }}</span>
              </router-link>
            </li>
          </ul>
        </div>
      </div>

      <!-- 主内容区域 -->
      <main class="main-content">
        <!-- 路由视图 -->
        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </main>
    </div>
  </div>
</template>

<style>
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: #f5f5f5;
  overflow: hidden;
}

.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.content-container {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}

.sidebar {
  width: 250px;
  background-color: #343a40;
  color: #fff;
  transition: all 0.3s;
  overflow-y: auto;
  z-index: 100;
  height: 100%;
}

.sidebar.collapsed {
  width: 60px;
}

.sidebar-content {
  padding: 1rem 0;
}

.sidebar .nav-link {
  color: rgba(255, 255, 255, 0.75);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  transition: all 0.3s;
}

.sidebar .nav-link:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
}

.sidebar .nav-link.active {
  color: #fff;
  background-color: #007bff;
}

.sidebar .nav-link i {
  margin-right: 10px;
  font-size: 1.1rem;
  width: 24px;
  text-align: center;
}

.sidebar.collapsed .nav-text {
  display: none;
}

.main-content {
  flex: 1;
  padding: 0;
  overflow: hidden;
  background-color: #f8f9fa;
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
}

/* 路由过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
